﻿@using RiverCruise.Helpers
@model RiverCruise.Models.Ship.ShipDetailModel

@{
    ViewBag.Title = "Detail";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container-fluid">
    
    <h2>@Model.Name</h2>

    <!-- edit menu -->
    @if (Roles.IsUserInRole(RoleHelper.Edit))
    {
        <div class="row">

            <div class="dropdown margin">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                    <span class="glyphicon glyphicon-cog"></span>
                    Manage
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                    <li role="presentation">
                        <a href="@Url.Action("ChangeCompany", "ShipManagement", new { Id = Model.ShipId }, null)">
                            <span class="glyphicon glyphicon-retweet"></span>
                             Change Company (sold)
                        </a>
                    </li>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation"><a class="" href="@Url.Action("Edit", "ShipManagement", new {Id = Model.ShipId }, null)"><span class="glyphicon glyphicon-edit"></span> Edit</a></li>
                    <!--
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                        -->
                    <li role="presentation">
                        <a class="triggerModal" data-rc-modalaction="DeleteGet" data-rc-modalcontroller="ShipManagement" href="#" data-rc-name="@Model.Name" data-rc-id="@Model.ShipId">
                            <span class="glyphicon glyphicon-trash"></span>
                            Delete
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    }<!-- edit menu -->

    <span class="clearfix"></span>
    
    <!-- tabs -->
    <div>
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#" id="DetailLink">Detail</a></li>
            <li role="presentation"><a href="#" id="companyHistoryLink">Company History</a></li>
            <li role="presentation"><a href="#" id="historyLink">Crew History</a></li>
            <li role="presentation"><a href="#" id="attachmentsLink">Attachments</a></li>
        </ul>
    </div><!-- tabs -->
    
    <div id="DetailTabContent">
        @if (Model.DeleteFailed)
        {
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="bs-callout bs-callout-danger text-danger">
                        <ul>
                            <li>Something went wrong, please try again.</li>
                        </ul>
                    </div>
                </div>
            </div>
        }

        <div class="container-fluid">
            <div>
                <h4>Detail</h4>
                <div class="container-fluid">

                    Company : <strong>@Html.ActionLink(Model.CompanyName, "Detail", "Company", new { Id = Model.CompanyId }, null) </strong><br />
                    ENI : <strong>@(Model.Eni)</strong><br />
                    Flag : <strong>@Model.Flag</strong><br />
                    Region : <strong>@Model.Region</strong><br />
                    Nautical crew : <strong>@Model.NauticalCrew</strong><br />
                    Hotel staff : <strong>@Model.HotelStaff</strong><br />
                    Total crew : <strong>@(Model.TotalCrew)</strong>
                </div>
                <br />
                <h4>Reports</h4>
                <div class="container-fluid">

                    @foreach (var report in Model.Reports)
                    {
                        <span class="pull-right"><em>@report.Date</em></span><strong>@report.Ref</strong><br />
                        @report.Remarks
                        <hr />
                    }
                </div>
            </div>
        </div>
    </div>
    

    <div id="historyPlaceHolder">
        <div class="text-center">
            <img src="~/Content/images/loading5.gif" alt="Loading..." />
        </div>
    </div>
    <div id="companyHistoryPlaceHolder">
        <div class="text-center">
            <img src="~/Content/images/loading5.gif" alt="Loading..." />
        </div>
    </div>
    <div id="attachementPlaceHolder">
        <div class="text-center">
            <img src="~/Content/images/loading5.gif" alt="Loading..." />
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $("#historyPlaceHolder").hide();
        $('#companyHistoryPlaceHolder').hide();
        $("#attachementPlaceHolder").hide();
    });

    $("#historyLink").click(function (e) {
        e.preventDefault();

        $("#DetailTabContent").hide();
        $('#companyHistoryPlaceHolder').hide();
        $("#attachementPlaceHolder").hide();
        $("#historyPlaceHolder").fadeIn();
        $("#historyLink").parent().parent().children().removeClass("active");
        $("#historyLink").parent().addClass("active");

        var options = {
            url: "@Url.Action("ShipHistory", "Home", new { Id = Model.ShipId}, null)",
            type: "get"
        };

        $.ajax(options).done(function (data) {
            var target = "#historyPlaceHolder";
            $(target).html(data);
        });

        return null;
    });

    $('#companyHistoryLink').click(function (e) {
        e.preventDefault();
        $('#DetailTabContent').hide();
        $('#historyPlaceHolder').hide();
        $("#attachementPlaceHolder").hide();
        $('#companyHistoryPlaceHolder').fadeIn();
        $("#historyLink").parent().parent().children().removeClass("active");
        $('#companyHistoryLink').parent().addClass("active");
        var options = {
            url: "@Url.Action("ShipCompanyHistory", "Home", new { Id = Model.ShipId}, null)",
            type: "get"
        };

        $.ajax(options).done(function (data) {
            var target = "#companyHistoryPlaceHolder";
            $(target).html(data);
        });

        return null;
    });

    $("#DetailLink").click(function (e) {
        e.preventDefault();
        $("#historyPlaceHolder").hide();
        $('#companyHistoryPlaceHolder').hide();
        $("#attachementPlaceHolder").hide();
        $("#DetailTabContent").fadeIn();
        $("#DetailLink").parent().parent().children().removeClass("active");
        $("#DetailLink").parent().addClass("active");
        return null;
    });

    $('#attachmentsLink').click(function(e) {
        e.preventDefault();
        $("#historyPlaceHolder").hide();
        $('#companyHistoryPlaceHolder').hide();
        $("#attachementPlaceHolder").fadeIn();
        $("#DetailTabContent").hide();
        $("#DetailLink").parent().parent().children().removeClass("active");
        $("#attachmentsLink").parent().addClass("active");
        
        var options = {
            url: "@Url.Action("ShipAttachements", "Home", new { Id = Model.ShipId}, null)",
            type: "get"
        };

        $.ajax(options).done(function (data) {
            var target = "#attachementPlaceHolder";
            $(target).html(data);
        });

        return null;
    });
</script>
